<? header("Content-Type: text/html,charset=UTF-8"); ?>

<html>
<head>
	<title>Create Questions</title>
	<meta charset="utf-8">
	<link rel="shortcut icon" href="images/favicon.ico">
</head>
<style type="text/css">
.require{
	height:20px;
	color:#FF0000;
	padding-left:5px;
	padding-right:5px;
	font-size:12px;
	line-height:15px;
	width:100px;
	float:none;
}

textarea{ resize: none; }
</style>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">

//เมื่อโหลดหน้าเวปนี้แล้วให้ทำอะไร
$(document).ready(function(){


        createQuestion();
        //Function สร้างชุดคำถาม
        $("#newQuestion").click(function(){
             createQuestion();
        });
        //Function สร้างคำตอบในชุดคำถาม
        $("#newAnswer").click(function(){
             createAnswer();
        });

	$("#frmMain").submit(function(){
		if(chkForm()) {
			if(chkRadio()){
				return true;
			}else{

				return false;
			}
		}else{
			alert("กรุณากรอกข้อมูลให้ครบ");
			return false;
		}
	});

});

var frm;

function chkForm(){
	$(":input + span.require").remove();
	$(":input").each(function(){
		$(this).each(function(){
			if($(this).val()==""){
				$(this).after("<span class=require><<- Require</span>");
			}
		});
	});
	if($(":input").next().is(".require")==false){
		return true;
	}else{
		$(".require").fadeOut(5000);
		return false;
	}
}

function chkRadio(){
	var counts = $('input[name="question[]"]').length;
	//var eRadio = "qType"+(count-1);
	//var countRadio = $('input[name="'+eRadio+'"]').length;
	var eRadios;
	for(var i=0;i<counts;i++){
		eRadios = "qType"+(i);
	   //	alert(counts);
		if($('input[name="'+eRadios+'"]:checked').val()==null){
			alert("กรุณาระบุประเภทของคำตอบ");
			return false;
		}else{
			return true;
		}
	}
}

function createQuestion(){

	var count = $('input[name="question[]"]').length;
	var txtQ = "คำถามข้อที่ ";
	var txtA = "คำตอบข้อที่ 1";

	frm = $("#frmMain");

	var question = document.createElement("input");
	question.setAttribute('type',"text");
	question.setAttribute('name',"question[]");

	var choice1 = document.createElement("input");
	choice1.setAttribute('type',"radio");
	choice1.setAttribute('name',"qType"+(count)+"");
	choice1.setAttribute('value',"1");

	var choice2 = document.createElement("input");
	choice2.setAttribute('type',"radio");
	choice2.setAttribute('name',"qType"+(count)+"");
	choice2.setAttribute('value',"2");

	var choice3 = document.createElement("input");
	choice3.setAttribute('type',"radio");
	choice3.setAttribute('name',"qType"+(count)+"");
	choice3.setAttribute('value',"3");

	var choice4 = document.createElement("input");
	choice4.setAttribute('type',"radio");
	choice4.setAttribute('name',"qType"+(count)+"");
	choice4.setAttribute('value',"4");

	var answer = document.createElement("input");
	answer.setAttribute('type',"text");
	answer.setAttribute('name',"answer"+(count)+"[]");

	txtQ += (++count);

	$(frm).append("<hr />");
	$(frm).append(txtQ);
	$(frm).append(question);
	$(frm).append("</br>");
	$(frm).append(choice1);
	$(frm).append(" 1.เลือกตอบได้ข้อเดียว</br>");
	$(frm).append(choice2);
	$(frm).append(" 2.เลือกตอบได้หลายข้อ</br>");
	$(frm).append(choice3);
	$(frm).append(" 3.สเกลประมาณค่า</br>");
	$(frm).append(choice4);
	$(frm).append(" 4.ช่องว่างเขียนอัตนัย</br>");
	$(frm).append(txtA);
	$(frm).append(answer);

}

//เพิ่มกล่องคำตอบ
function createAnswer(){
	var countQ = $('input[name="question[]"]').length;
	var countA = 0;
	var elementA = "answer"+(countQ-1)+"[]";
	var txtA = "คำตอบข้อที่ ";

	frm = $("#frmMain");

	countA = $('input[name="'+elementA+'"]').length;
	txtA += (++countA);

	var answer = document.createElement("input");
	answer.setAttribute('type',"text");
	answer.setAttribute('name',"answer"+(countQ-1)+"[]");

	$(frm).append("</br>");
	$(frm).append(txtA);
	$(frm).append(answer);

}

</script>

<body>



	<form id="frmMain" name="frmMain" method="post" action="result.php">
	<input type="submit" id="btnSubmit" name="btnSubmit" value="Save Data" />
	</form>

	<input name="newQuestion" id="newQuestion" type="button" value="(+) Add Question">
	<input name="newAnswer" id="newAnswer" type="button" value="(+) Add Answer">
	<br />


</body>
</html>
